<template>
	<view class="page">
	    <view class="header">
	      <view class="user-info">
	        <image class="avatar" :src="'https://ai-public.mastergo.com/ai/img_res/b7e17b35feefbdfc01d66e32be77bf6d.jpg'" />
	        <view class="info">
	          <view class="user-id">小善</view>
	          <view class="study-card">
	            <!-- <uni-text class="card-text">学习记录</uni-text>
	            <view class="points">
	              <uni-icons type="star-filled" size="14" color="#FFB800"/>
	              <uni-text class="point-num">255</uni-text>
	            </view> -->
	          </view>
	        </view>
	      </view>
	    </view>
	
	    <scroll-view scroll-y class="content">
	      <!-- <image class="banner" :src="'https://ai-public.mastergo.com/ai/img_res/c2c823b77715ed7428978f380409112e.jpg'" /> -->
	
	      <view class="lesson-section">
	        <view class="section-title">
	          <uni-icons type="bars" size="20" color="#FFB800"/>
	          <uni-text class="title-text">课本教材</uni-text>
	        </view>
	        <view class="book-card">
	          <image class="book-cover" :src="book.cover|image" />
	          <view class="book-info">
	            <view class="book-title">{{book.name}}</view>
	            <view class="book-subtitle">{{book.typeLabel}}</view>
	          </view>
	          <uni-button class="switch-btn" type="primary" @click="switchBook">切换教材</uni-button>
	        </view>
	      </view>
	
	      <!-- <view class="feature-grid">
	        <view class="feature-item" v-for="(item, index) in features" :key="index">
	          <view class="feature-icon" :style="{ backgroundColor: item.bgColor }">
	            <uni-icons :type="item.icon" size="24" color="#FFFFFF"/>
	          </view>
	          <uni-text class="feature-text">{{ item.text }}</uni-text>
	        </view>
	      </view> -->
	
	      <!-- <view class="practice-section">
	        <view class="section-title">
	          <uni-icons type="help" size="20" color="#4CD964"/>
	          <uni-text class="title-text">教材同步讲练</uni-text>
	          <uni-text class="subtitle">同步预习复习</uni-text>
	        </view>
	        <view class="practice-cards">
	          <view class="practice-card study">
	            <view class="card-content">
	              <view class="card-title">课本同步讲解练习</view>
	              <view class="card-subtitle">全面掌握课本知识点</view>
	              <uni-button size="mini" type="primary">去学习</uni-button>
	            </view>
	            <image class="card-image" :src="'https://ai-public.mastergo.com/ai/img_res/468358fc6a3ee04ac746ebc5334d55f5.jpg'" />
	          </view>
	          <view class="practice-card group">
	            <view class="card-content">
	              <view class="card-title">进入学习群</view>
	              <uni-button size="mini" type="primary">
	                <uni-icons type="forward" size="16" color="#FFFFFF"/>
	              </uni-button>
	            </view>
	          </view>
	        </view>
	      </view> -->
	
	      <view class="words-section">
	        <view class="section-header">
	          <view class="section-title">
	            <uni-icons type="medal" size="20" color="#007AFF"/>
	            <uni-text class="title-text">单词学习</uni-text>
	            <uni-text class="subtitle">背得快，记得牢</uni-text>
	          </view>
	          <!-- <view class="more">
	            更多练习
	            <uni-icons type="forward" size="14" color="#999999"/>
	          </view> -->
	        </view>
	        <view class="word-cards">
	          <view class="word-card" v-for="(item, index) in wordCards" :key="index">
	            <view class="card-content">
	              <view class="card-title">{{ item.title }}</view>
	              <view class="card-subtitle">{{ item.subtitle }}</view>
	              <uni-button size="mini" type="primary">GO</uni-button>
	            </view>
	            <image class="mascot" :src="item.image" />
	          </view>
	        </view>
	      </view>
	    </scroll-view>
	  </view>
</template>

<script>
	const features = [
	  { text: '听课文', icon: 'headphones', color: '#007AFF', class: 'blue' },
	  { text: '看动画', icon: 'videocam', color: '#FF3B30', class: 'red' },
	  { text: '练朗读', icon: 'mic', color: '#4CD964', class: 'green' },
	  { text: '趣配音', icon: 'sound', color: '#FF9500', class: 'orange' }
	];
	
	const wordCards = [
	  {
	    title: '单词听写',
	    desc: '纸笔听写强记忆',
	    image: 'https://ai-public.mastergo.com/ai/img_res/f535a5f44eab813cbb85624caffc7802.jpg'
	  },
	  {
	    title: '单词同步学',
	    desc: '夯实词汇基础',
	    image: 'https://ai-public.mastergo.com/ai/img_res/2434c1cadc13bc935a8774b2d7dd3d32.jpg'
	  },
	  {
	    title: '单词大挑战',
	    desc: '晋升高手之路',
	    image: 'https://ai-public.mastergo.com/ai/img_res/cff2fa0ce8df136bcbdb634e0d3fbf80.jpg'
	  },
	  {
	    title: '单词魔法游戏',
	    desc: '与外教共闯关',
	    image: 'https://ai-public.mastergo.com/ai/img_res/5e7b4d51138311f2ebb49c64aac1ccff.jpg'
	  }
	];
	export default {
		data() {
			return {
				features: features,
				wordCards: wordCards,
				
				loading: false,
				book: null
			}
		},
		onShow() {
			
			this.initData();
		},

		onShareAppMessage() {
			return {
				title: '至善学堂',
				path: '/pages/index/index'
			}
		},
		onShareTimeline() {
			return {
				title: '至善学堂'
			}
		},

		computed:{

		},
		methods: {
			/**
			 * 初始化数据
			 */
			initData(){
				this.book = uni.getStorageSync('CURRENT_BOOK');
				if(!this.book){
					this.$api.bookService.findList({
						subject: 'English'
					}).then(resp=>{
						this.book = resp.items[0]
					})
				}
				
			},
			switchBook(){
				uni.navigateTo({
					url: "/pages/english/book"
				})
			}
		}
	}
</script>


<style lang="scss" scoped>
	page {
	  height: 100%;
	  background-color: #FFF6F2;
	}
	
	.page {
	  height: 100%;
	  display: flex;
	  flex-direction: column;
	}
	
	.header {
	  padding: 20rpx 30rpx;
	  background-color: #FFF6F2;
	  flex-shrink: 0;
	}
	
	.content{
		box-sizing: border-box;
	}
	.user-info {
	  display: flex;
	  align-items: center;
	}
	
	.avatar {
	  width: 80rpx;
	  height: 80rpx;
	  border-radius: 40rpx;
	  margin-right: 20rpx;
	}
	
	.info {
	  flex: 1;
	}
	
	.user-id {
	  font-size: 16px;
	  color: #333333;
	  margin-bottom: 4rpx;
	}
	
	.study-card {
	  display: flex;
	  align-items: center;
	}
	
	.card-text {
	  font-size: 12px;
	  color: #999999;
	  margin-right: 10rpx;
	}
	
	.points {
	  display: flex;
	  align-items: center;
	}
	
	.point-num {
	  font-size: 12px;
	  color: #FFB800;
	  margin-left: 4rpx;
	}
	
	.content {
	  flex: 1;
	  overflow: auto;
	  padding: 0 30rpx 30rpx;
	}
	
	.banner {
	  width: 690rpx;
	  height: 200rpx;
	  border-radius: 20rpx;
	  margin-bottom: 30rpx;
	}
	
	.section-title {
	  display: flex;
	  align-items: center;
	  margin-bottom: 20rpx;
	}
	
	.title-text {
	  font-size: 16px;
	  color: #333333;
	  margin: 0 10rpx;
	  font-weight: bold;
	}
	
	.subtitle {
	  font-size: 12px;
	  color: #999999;
	}
	
	.book-card {
	  background-color: #FFFFFF;
	  border-radius: 20rpx;
	  padding: 30rpx;
	  display: flex;
	  align-items: center;
	  margin-bottom: 30rpx;
	  position: relative;
	}
	
	.book-cover {
	  width: 120rpx;
	  height: 160rpx;
	  border-radius: 10rpx;
	  margin-right: 20rpx;
	}
	
	.book-info {
	  flex: 1;
	}
	
	.book-title {
	  font-size: 16px;
	  color: #333333;
	  margin-bottom: 10rpx;
	}
	
	.book-subtitle {
	  font-size: 14px;
	  color: #999999;
	}
	
	.switch-btn {
	  background-color: #FF6B6B;
	  position: absolute;
	  right: 0;
	  top: 0;
	  font-size: 24rpx;
	  width: 160rpx;
	  line-height: 56rpx;
	  border-radius: 0rpx 20rpx 0 20rpx;
	}
	
	.feature-grid {
	  display: flex;
	  justify-content: space-between;
	  margin-bottom: 30rpx;
	}
	
	.feature-item {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	}
	
	.feature-icon {
	  width: 80rpx;
	  height: 80rpx;
	  border-radius: 20rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  margin-bottom: 10rpx;
	}
	
	.feature-text {
	  font-size: 14px;
	  color: #333333;
	}
	
	.practice-cards {
	  display: flex;
	  gap: 20rpx;
	}
	
	.practice-card {
	  flex: 1;
	  background-color: #FFFFFF;
	  border-radius: 20rpx;
	  padding: 30rpx;
	}
	
	.practice-card.study {
	  background-color: #E8F8E8;
	}
	
	.practice-card.group {
	  background-color: #FFF3E0;
	}
	
	.card-content {
	  margin-bottom: 20rpx;
	}
	
	.card-title {
	  font-size: 16px;
	  color: #333333;
	  margin-bottom: 10rpx;
	}
	
	.card-subtitle {
	  font-size: 12px;
	  color: #999999;
	  margin-bottom: 20rpx;
	}
	
	.card-image {
	  width: 120rpx;
	  height: 120rpx;
	}
	
	.words-section {
	  margin-top: 30rpx;
	}
	
	.section-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin-bottom: 20rpx;
	}
	
	.more {
	  font-size: 14px;
	  color: #999999;
	  display: flex;
	  align-items: center;
	}
	
	.word-cards {
	  display: grid;
	  grid-template-columns: repeat(2, 1fr);
	  gap: 20rpx;
	}
	
	.word-card {
	  background-color: #FFFFFF;
	  border-radius: 20rpx;
	  padding: 20rpx;
	  display: flex;
	  justify-content: space-between;
	}
	
	.mascot {
	  width: 100rpx;
	  height: 100rpx;
	}
	
	.uni-button {
	  margin: 0;
	}
	
	.uni-button[size=mini] {
	  padding: 0 20rpx;
	  line-height: 60rpx;
	}
		
		
		
</style>

